import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

const MovieList = () => {
  const [movies, setMovies] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    // TODO: 从后端获取电影列表
    const fetchMovies = async () => {
      try {
        const response = await axios.get('/api/movies');
        setMovies(response.data);
      } catch (error) {
        console.error('Error fetching movies:', error);
      }
    };

    fetchMovies();
  }, []);

  const handleMovieClick = (movieId) => {
    navigate(`/movie/${movieId}`);
  };

  return (
    <div style={{ padding: '24px' }}>
      <h2>电影列表</h2>
      <Row gutter={[16, 16]}>
        {movies.map((movie) => (
          <Col xs={24} sm={12} md={8} lg={6} key={movie.id}>
            <Card
              hoverable
              cover={<img alt={movie.title} src={movie.posterUrl} />}
              onClick={() => handleMovieClick(movie.id)}
            >
              <Card.Meta
                title={movie.title}
                description={`评分：${movie.rating}`}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default MovieList; 